import { useEffect, useState } from 'react';
import { 
  User as UserIcon, 
  Camera, 
  Save, 
  RotateCcw,
  Settings,
  Activity,
  FileText,
  Calendar
} from 'lucide-react';
import { useAppDispatch } from '@/store';
import { setBreadcrumbs } from '@/store/slices/uiSlice';
import './styles.less';

const Profile: React.FC = () => {
  const dispatch = useAppDispatch();
  const [isEditing, setIsEditing] = useState(false);
  const [userInfo, setUserInfo] = useState({
    name: '张三',
    email: 'zhangsan@example.com',
    phone: '+86 138 0013 8000',
    joinDate: '2024-01-15',
    preferences: {
      language: 'zh-CN',
      theme: 'light',
      notifications: true,
      autoSave: true,
    }
  });

  useEffect(() => {
    dispatch(setBreadcrumbs([{ label: '仪表板', path: '/dashboard' }, { label: '个人资料' }]));
  }, [dispatch]);

  const handleSave = () => {
    setIsEditing(false);
    console.log('保存用户信息:', userInfo);
  };

  const handleCancel = () => {
    setIsEditing(false);
    // 重置用户信息（这里应该有原始数据）
  };

  const handleChange = (field: string, value: string) => {
    setUserInfo(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const handlePreferenceChange = (field: string, value: any) => {
    setUserInfo(prev => ({
      ...prev,
      preferences: {
        ...prev.preferences,
        [field]: value
      }
    }));
  };

  return (
    <div className='profile-page'>
      {/* 页面标题和描述 */}
      <div className='profile-page__header'>
        <h1 className='profile-page__title'>个人资料</h1>
        <p className='profile-page__description'>
          管理您的个人信息和偏好设置
        </p>
      </div>

      {/* 主要内容 */}
      <div className='profile-page__content'>
        <div className='profile-page__layout'>
          {/* 侧边栏 - 用户头像和信息 */}
          <div className='profile-page__sidebar'>
            <div className='profile-page__avatar-section'>
              <div className='profile-page__avatar-container'>
                <img 
                  src='/api/placeholder/96/96' 
                  alt='用户头像'
                  className='profile-page__avatar'
                />
                <button className='profile-page__avatar-edit'>
                  <Camera className='w-4 h-4' />
                </button>
              </div>
              
              <h2 className='profile-page__user-name'>{userInfo.name}</h2>
              <p className='profile-page__user-role'>高级用户</p>
              
              <div className='profile-page__user-stats'>
                <div className='profile-page__stat'>
                  <div className='profile-page__stat-value'>1,247</div>
                  <div className='profile-page__stat-label'>处理任务</div>
                </div>
                <div className='profile-page__stat'>
                  <div className='profile-page__stat-value'>95.3%</div>
                  <div className='profile-page__stat-label'>成功率</div>
                </div>
              </div>
            </div>
          </div>

          {/* 主内容区域 */}
          <div className='profile-page__main'>
            {/* 基本信息 */}
            <div className='profile-page__info-section'>
              <div className='profile-page__section-header'>
                <h2 className='profile-page__section-title'>基本信息</h2>
                <p className='profile-page__section-description'>
                  管理您的个人信息和联系方式
                </p>
              </div>
              
              <div className='profile-page__info-group'>
                <div className='profile-page__field'>
                  <label className='profile-page__field-label'>姓名</label>
                  {isEditing ? (
                    <input
                      type='text'
                      value={userInfo.name}
                      onChange={e => handleChange('name', e.target.value)}
                      className='profile-page__field-input'
                    />
                  ) : (
                    <div className='profile-page__field-readonly'>{userInfo.name}</div>
                  )}
                </div>

                <div className='profile-page__field'>
                  <label className='profile-page__field-label'>邮箱</label>
                  {isEditing ? (
                    <input
                      type='email'
                      value={userInfo.email}
                      onChange={e => handleChange('email', e.target.value)}
                      className='profile-page__field-input'
                    />
                  ) : (
                    <div className='profile-page__field-readonly'>{userInfo.email}</div>
                  )}
                </div>

                <div className='profile-page__field'>
                  <label className='profile-page__field-label'>手机号码</label>
                  {isEditing ? (
                    <input
                      type='tel'
                      value={userInfo.phone}
                      onChange={e => handleChange('phone', e.target.value)}
                      className='profile-page__field-input'
                    />
                  ) : (
                    <div className='profile-page__field-readonly'>{userInfo.phone}</div>
                  )}
                </div>

                <div className='profile-page__field'>
                  <label className='profile-page__field-label'>加入日期</label>
                  <div className='profile-page__field-readonly'>{userInfo.joinDate}</div>
                </div>
              </div>

              <div className='profile-page__action-buttons'>
                {isEditing ? (
                  <>
                    <button 
                      onClick={handleSave}
                      className='profile-page__action-button profile-page__action-button--primary'
                    >
                      <Save className='w-4 h-4 mr-2' />
                      保存
                    </button>
                    <button 
                      onClick={handleCancel}
                      className='profile-page__action-button profile-page__action-button--secondary'
                    >
                      <RotateCcw className='w-4 h-4 mr-2' />
                      取消
                    </button>
                  </>
                ) : (
                  <button 
                    onClick={() => setIsEditing(true)}
                    className='profile-page__action-button profile-page__action-button--primary'
                  >
                    <Settings className='w-4 h-4 mr-2' />
                    编辑信息
                  </button>
                )}
              </div>
            </div>

            {/* 偏好设置 */}
            <div className='profile-page__preferences-section'>
              <div className='profile-page__section-header'>
                <h2 className='profile-page__section-title'>偏好设置</h2>
                <p className='profile-page__section-description'>
                  自定义您的应用体验
                </p>
              </div>
              
              <div className='profile-page__preferences-grid'>
                <div className='profile-page__preference-item'>
                  <label className='profile-page__preference-label'>语言</label>
                  <select
                    value={userInfo.preferences.language}
                    onChange={e => handlePreferenceChange('language', e.target.value)}
                    className='profile-page__preference-select'
                  >
                    <option value='zh-CN'>简体中文</option>
                    <option value='en-US'>English</option>
                  </select>
                </div>

                <div className='profile-page__preference-item'>
                  <label className='profile-page__preference-label'>主题</label>
                  <select
                    value={userInfo.preferences.theme}
                    onChange={e => handlePreferenceChange('theme', e.target.value)}
                    className='profile-page__preference-select'
                  >
                    <option value='light'>浅色主题</option>
                    <option value='dark'>深色主题</option>
                    <option value='auto'>跟随系统</option>
                  </select>
                </div>

                <div className='profile-page__preference-item'>
                  <label className='profile-page__preference-label'>通知设置</label>
                  <div className='profile-page__preference-checkbox'>
                    <input
                      type='checkbox'
                      checked={userInfo.preferences.notifications}
                      onChange={e => handlePreferenceChange('notifications', e.target.checked)}
                    />
                    <span>接收应用通知</span>
                  </div>
                </div>

                <div className='profile-page__preference-item'>
                  <label className='profile-page__preference-label'>自动保存</label>
                  <div className='profile-page__preference-checkbox'>
                    <input
                      type='checkbox'
                      checked={userInfo.preferences.autoSave}
                      onChange={e => handlePreferenceChange('autoSave', e.target.checked)}
                    />
                    <span>自动保存设置更改</span>
                  </div>
                </div>
              </div>
            </div>

            {/* 最近活动 */}
            <div className='profile-page__activity-section'>
              <div className='profile-page__section-header'>
                <h2 className='profile-page__section-title'>最近活动</h2>
              </div>
              
              <div className='profile-page__activity-list'>
                <div className='profile-page__activity-item'>
                  <Activity className='profile-page__activity-icon' />
                  <div className='profile-page__activity-content'>
                    <div className='profile-page__activity-title'>视频格式转换完成</div>
                    <div className='profile-page__activity-description'>vacation.mp4 → AVI</div>
                    <div className='profile-page__activity-time'>2小时前</div>
                  </div>
                </div>

                <div className='profile-page__activity-item'>
                  <FileText className='profile-page__activity-icon' />
                  <div className='profile-page__activity-content'>
                    <div className='profile-page__activity-title'>批量处理任务完成</div>
                    <div className='profile-page__activity-description'>5个文件转换完成</div>
                    <div className='profile-page__activity-time'>今天 14:30</div>
                  </div>
                </div>

                <div className='profile-page__activity-item'>
                  <Settings className='profile-page__activity-icon' />
                  <div className='profile-page__activity-content'>
                    <div className='profile-page__activity-title'>偏好设置已更新</div>
                    <div className='profile-page__activity-description'>语言设置为简体中文</div>
                    <div className='profile-page__activity-time'>昨天 09:15</div>
                  </div>
                </div>
              </div>
            </div>

            {/* 欢迎卡片 - 显示开发状态 */}
            <div className='profile-page__welcome-card'>
              <UserIcon className='profile-page__welcome-icon' />
              <h2 className='profile-page__welcome-title'>个人资料功能开发中</h2>
              <p className='profile-page__welcome-text'>
                我们正在开发完整的用户资料管理功能，包括更多个人信息字段和高级设置选项
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Profile;
